import React, { FC, useState, useEffect } from 'react'
import { IOptionProps } from './interface'
import './index.less'

const Option: FC<IOptionProps> = ({
    label,
    value,
    defaultValue,
    type,
    className,
    onSelect,
}) => {
    const [selected, setSelected] = useState(false)

    useEffect(() => {
        if (value === defaultValue) {
            setSelected(true)
        } else {
            setSelected(false)
        }
    }, [value, defaultValue])

    if (type === 'radio') {
        return (
            <div onClick={() => onSelect?.(value, label)} className="select-option select-option-radio">
                {
                    selected ? (
                        <div className="option-radio option-radio-selected"></div>
                    ) : (
                        <div className="option-radio"></div>
                    )
                }
                <div>{label}</div>
            </div>
        )
    } else {
        return (
            <div onClick={() => onSelect?.(value, label)}
                className={`${className} ${selected ? 'option-selected' : ''} select-option`}>
                {label}
            </div>
        )
    }
}

export default Option